<template>
  <div class="wrap">
    <!--导航区域-->
    <Nav></Nav>
    <!--中间内容区-->
    <div class="con-bar">
      <span v-for="(item,index) in arr" :class="{'span':active==index}" @click="change(item.name,index)" >{{item.tit}}</span>
    </div>
    <div>
      <component :is="com"></component>
    </div>
    <!--底部导航区域-->
    <Tabbar></Tabbar>
  </div>

</template>

<script>

  import Nav from "../com/Nav";
  import Tabbar from "../com/Tabbar";
  import Tuijian from "./Tuijian";
  import Zdj from "./Zdj";
  import Food from "./Food";
  import Muying from "./Muying";

    export default {
        name: "Ind",

      data () {
        return {
          com:'Tuijian',
          bol:true,
          active:0,
          arr:[
            {name:'Tuijian',tit:'推荐'},
            {name:'Zdj',tit:'贼惦记'},
            {name:'Food',tit:'食品'},
            {name:'Muying',tit:'母婴'}
          ]
        }
      },
      components: {
          Nav,
          Tabbar,
          Tuijian,
          Zdj,
          Food,
          Muying
      },
      methods:{
        change(n,i){
          this.com=n;
          this.active=i;
        }
      }
    }
</script>

<style scoped>

  .wrap{
    background: #f2f2f2;
    margin-top: 16rem;
    margin-bottom: 10rem;
  }
  .con-bar{
    position: fixed;
    top: 0;
    margin-top: 10rem;
    width: 60rem;
    height: 6rem;
    background: #fff;
    padding: 0 6rem;
    display: flex;
    justify-content: space-between;
    flex: 1;
    z-index: 999;
  }
  .con-bar span{
    color: #333333;
    font-size: 3rem;
    line-height: 6rem;
  }

  .con-bar .span{
    color:#e53e42;
    border-bottom: .2rem solid #e53e42;
  }
</style>
